<template>
  <app-section>
    <van-nav-bar :title="navTitle" @click-left="backRoute" left-arrow/>
    <van-pull-refresh v-model="pullLoading" @refresh="onRefresh">
      <van-list
        v-model="listLoading"
        :finished="listFinished"
        :finished-text="finishedText"
        :error.sync="listError"
        error-text="请求失败，点击重新加载"
        @load="onLoad()">

        <van-cell
          icon="description"
          v-for="(item,index) in applyList"
          :key="index"
          :title="item.title"
          is-link
          @click="showEditPage(item)">

          <template slot="label">
            <div>{{ item.tableTxt }}</div>
            <div style="padding-top:3px">
              保存时间:
              <span style="margin-left:1px">{{ item.createTime }}</span>
            </div>
          </template>
          <!--<div slot="right-icon">
            <van-tag v-if="item.formType === '1'" plain type="warning">online</van-tag>
            <van-tag v-if="item.formType === '2'" plain type="primary">customer</van-tag>
            <span v-else></span>
          </div>-->


        </van-cell>

      </van-list>
    </van-pull-refresh>

    <div id="editApplyForm" style="width: 100%"></div>
    <van-popup v-model="applyFormFlag" get-container="#editApplyForm">

      <des-form-page
              mode="edit"
              ref="desFormPage"
              @success="refreshDraftPage"
              @save="refreshDraftPage"
              @back="()=>applyFormFlag=false">
      </des-form-page>
    </van-popup>

  </app-section>
</template>

<script>
  import AppBlock from '@/components/AppBlock'
  import AppSection from '@/components/AppSection'
  import { getAction,postAction } from '@/api'
  import DesFormPage from '@/components/DesFormPage'

  import { ACCESS_TOKEN } from "@/util/constants"
  import Vue from 'vue'

  export default {
    name: "tab-draft",
    components:{
      AppSection,AppBlock,DesFormPage
    },
    data() {
      return {
        navTitle:'审批草稿',
        listError:false,
        listLoading: false,
        pullLoading: false,
        listFinished:false,
        finishedText:'没有更多了',
        pageNo:1,
        pageSize:10,
        url: '/process/extActDesignFlowData/list',
        listUrl: '/app/joa/draftList',
        startProcessUrl: "/process/extActProcess/startDesFormMutilProcess",
        queryFormDataById: '/desform/data/queryById',
        applyList:[],
        flowCodePre:'desform_',

        applyFormFlag:false,
        isOnline:false,

      }
    },
    mounted(){

    },
    watch: {
      '$route' () {
        this.onRefresh()
      }
    },
    methods: {
      backRoute(){
        this.$router.push({name:'home'})
      },
      async startDesFormProcess (record){
        //根据desformDataId查询数据对象
        let res =  await getAction(this.queryFormDataById, {id:record.desformDataId});
        if(!res.success){
          this.$toast(res.message);
          return;
        }
        //var jsonData = JSON.stringify(res.result.desformDataJson);
        let jsonData = res.result.desformDataJson;
        let TOKEN = Vue.ls.get(ACCESS_TOKEN);
        let DOMAIN_URL = window._CONFIG['domainURL'];
        console.log(DOMAIN_URL+TOKEN)
        let param = {
          flowCode:this.flowCodePre+record.desformCode,
          id:record.id,
          formUrl:"{{DOMAIN_URL}}/desform/detail/"+record.desformCode+"/${BPM_DES_DATA_ID}?token={{TOKEN}}",
          formUrlMobile:"{{DOMAIN_URL}}/desform/detail/"+record.desformCode+"/${BPM_DES_DATA_ID}?token={{TOKEN}}",
          jsonData:jsonData,
        }
        console.log('流程提交数据',param)
        const that = this
        postAction(that.startProcessUrl,param).then((res)=>{
          if(res.success){
            that.$toast.success({
              message:res.message,
              onClose:()=>{
                that.$router.push({name:'apply'})
              }
            });
          }else{
            that.$toast(res.message);
          }
        });
      },
      openOnlineForm(item){
        console.log("openOnlineForm",item)
        this.applyFormFlag = true;
        this.isOnline=true;
        this.$nextTick(()=>{
          this.$refs.onlineForm.initForm(item)
        })
      },
      openDesForm(item){
        console.log("openDesForm",item)
        this.applyFormFlag=true;
        this.isOnline=false;
        this.$nextTick(()=>{
          this.$refs.desFormPage.initForm(item)
        })
      },
      showEditPage(record){
        if(record.formType=='1'){
          //online 表单
          let item = {
            desformCode: record.formTableName,
            desformName: record.tableTxt,
            id: record.tableCode,
            dataId: record.dataId
          }
          this.openOnlineForm(item)
        }else{
          let item = {
            desformCode: record.tableCode,
            desformName: record.tableTxt,
            dataId: record.dataId,
            designId: record.designId
          }
          this.openDesForm(item)
        }

      },
      onRefresh() {
        this.pullLoading = true
        this.pageNo = 1
        let param = {
          pageNo: this.pageNo,
          pageSize: this.pageSize
        }
        this.applyList=[]
        getAction(this.listUrl,param).then(res=>{
          this.pullLoading = false
          if(res.success){
            console.log(res)
            this.pageNo++
            let arr = res.result;
            for(let item of arr){
              this.applyList.push(item)
            }
          }
        })
      },
      onLoad(){
        this.listLoading = true;
        let param = {
          pageNo: this.pageNo,
          pageSize: this.pageSize
        }
        console.log("请求参数",param);
        getAction(this.listUrl,param).then(res=>{
          this.listLoading = false;
          console.log("请求结果",res);
          if(res.success){
            // this.$toast.success("加载完成");
            this.pageNo++;
            let arr = res.result;
            for(let item of arr){
              this.applyList.push(item)
            }
            if(!arr || arr.length < this.pageSize){
              console.log("加载完成!");
              this.listFinished = true;
            }
           // console.log("结果数据", this.applyList)
          }else{
            this.error = true;
          }
        }).catch(e=>{
          console.log("请求错误",e)
          this.error = true;
        })
      },

      refreshDraftPage() {
        this.applyFormFlag=false;
        this.onRefresh()
      },


    },

  }
</script>

<style scoped lang="less">
  .demo-pull-refresh {
    background-color:#fff;

    .van-pull-refresh {
      &,
      &__track {
        height: calc(100vh - 50px);
      }
    }

  }
  #editApplyForm .van-popup{
    width:100%
  }
  .flow{overflow: scroll}
</style>
